<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .input_text {
            border: 1px solid #d9d9d9;
            color: #aaa;
            outline: none;
        }

        .input_text_focus {
            border: 1px solid #ffd6db;
            color: #888;
            outline: none;
        }
    </style>
</head>

<body>

    <div class="new_header">
        <div class="new_wrap">
            <form id="hder_login_form_new" method="post">
                <input type="text" class="input_text" id="uname" value="邮箱/ID/手机号">
            </form>
        </div>
    </div>


    <!-- ### 1 - 输入框内容显示和隐藏（加强训练）

    - 题目描述
    
      仿世纪佳缘网，显示和隐藏输入框中的提示内容，具体表现如下图：
    
      1）输入框获得焦点，提示内容消失，边框变色
    
      2）输入框失去焦点，如果内容为空，提示内容恢复，边框变色；如果内容不为空，只有边框变色 -->


    <script>
        //    事件源是text文本框
        //    事件类型是焦点
        //    事件处理程序边框变色，内容消失，
        // 以ID为获取方式
        var text = document.querySelector('#uname')
        // 给文本框注册获得焦点事件，清空value值
        text.onfocus = function () {
            if (text.value === '邮箱/ID/手机号') {
                this.value = '';

            }
            // 改变border的颜色
            text.style.border = '1px solid pink'
        }
        // 给文本框注册失去焦点事件，获取并判断文本框的内容
        text.onblur = function () {
            // 内容为空，恢复提示内容，边框恢复原来的颜色
            if (text.value === '') {
                this.value = '邮箱/ID/手机号';
                text.style.color = '#ccc'
                // 内容不为空，边框恢复原来的颜色
            } else {
                text.style.color = '#666'
            }
            text.style.border = '1px solid #ccc'

        }





    </script>
</body>

</html>